<template>
  <div class="cms-vip" :class="`style_${type}`">
    <p class="text-xs text-[#4a4a4a] font-normal">套餐</p>
    <div class="set-meal">
      <span class="title text-base leading-6 font-medium">会员套餐</span>
      <div class="set-meal-box">
        <div class="set-meal-type" v-for="(item, index) in setMeal" :key="index">
          <div class="content" :class="{ choice: item.choice }">
            <p class="type">{{ item.title }}</p>
            <p v-if="type !== 3" class="description">{{ item.des }}</p>
            <div class="money">
              <span class="symbol-used">￥</span>
              <span class="price">{{ item.price }}</span>
              <span class="symbol-unused">￥{{ item.origin_price }}</span>
            </div>
          </div>
          <div v-if="type === 3" class="price-tag">半价</div>
          <div v-if="type !== 3" class="pay-btn-box">
            <div v-if="type === 1" class="pay-btn">立即开通</div>
            <div class="pay-btn">开通</div>
          </div>
        </div>
      </div>

      <div v-if="type === 3" class="pay-btn">立即开通</div>
    </div>

    <p v-if="type === 1" class="text-xs text-[#4a4a4a] font-normal mt-6">支付</p>
    <p v-if="type !== 1" class="text-xs text-[#4a4a4a] font-normal mt-3">支付</p>
    <div class="pay">
      <div class="paying">
        <div v-if="type === 3" class="price-tag">半价</div>

        <div class="type">
          <div v-if="type !== 1" class="w-8 h-8 mr-2">占位</div>
          VIP月卡
        </div>
        <p v-if="type === 1" class="description">半价优惠</p>
        <div class="money">
          <span class="symbol-used">￥</span>
          <span class="price">10</span>
          <span v-if="type !== 3" class="symbol-unused">￥20</span>
        </div>
        <!-- <div v-if="type !== 1" class="money">
          <span class="symbol-unused">￥20</span>
          <span class="symbol-used">￥</span>
          <span class="price">10</span>
        </div> -->
      </div>
      <div class="exchange">可以支付1000金币直接兑换</div>
      <div class="btn-box">
        <div class="gold-exchange">金币兑换</div>
        <div class="immediate-pay">立即支付</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import cmsVipPayProps from './props'
export default defineComponent({
  props: cmsVipPayProps,
  data() {
    return {
      baseUrl: '/src/components/cms/components/',
      setMeal: [
        {
          title: 'VIP月卡',
          des: '半价优惠',
          price: 10,
          origin_price: 20,
          choice: true
        },
        {
          title: 'VIP季卡',
          des: '4.5折优惠',
          price: 27,
          origin_price: 60,
          choice: false
        },
        {
          title: 'VIP半年卡',
          des: '4折优惠',
          price: 48,
          origin_price: 120,
          choice: false
        },
        {
          title: 'VIP年卡',
          des: '3.5折优惠',
          price: 84,
          origin_price: 240,
          choice: false
        }
      ]
    }
  }
})
</script>
<style lang="less" scoped>
.cms-vip {
  width: 375px;
  background-color: #fff;
  @apply px-4 py-2;
  .set-meal {
    padding: 12px 0;
    overflow: hidden;
  }
  .set-meal-box {
    margin-top: 16px;
    @apply flex flex-row gap-x-4;
  }
  .type {
    font-size: 16px;
    color: #000000;
    letter-spacing: 0;
    font-weight: 500;
  }
  .description {
    font-size: 12px;
    color: #8f9299;
    letter-spacing: 0;
    font-weight: 400;
    margin-top: 4px;
  }
  .money {
    margin-top: 12px;
    color: #ff613f;
    .symbol-used {
      font-size: 16px;
    }
    .price {
      font-size: 24px;
    }
    .symbol-unused {
      font-size: 12px;
      margin-left: 8px;
      color: #8f9299;
      letter-spacing: 0;
      font-weight: 400;
      text-decoration: solid;
      text-decoration-line: line-through;
    }
  }
  .content {
    height: 107px;
    padding: 12px;
  }
  .pay-btn-box {
    height: 52px;
  }
  .exchange {
    font-size: 12px;
    color: #48494d;
    letter-spacing: 0;
    font-weight: 400;
    margin-top: 8px;
    margin-left: 6px;
  }
  .btn-box {
    margin-top: 16px;
    @apply flex justify-between gap-x-4;
  }
  .gold-exchange {
    font-size: 14px;
    color: #292423;
    letter-spacing: 0;
    font-weight: 500;

    width: 163px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: #eeeeee;
    border-radius: 52.5px;
  }
  .immediate-pay {
    font-size: 14px;
    color: #292423;
    letter-spacing: 0;
    font-weight: 500;

    width: 163px;
    height: 40px;
    line-height: 40px;
    text-align: center;

    background-image: linear-gradient(90deg, #ffeba7 0%, #f7ca70 100%);
    border-radius: 52.5px;
  }

  &.style_1 {
    .set-meal {
      width: 343px;
      background: #353535;
      border-radius: 8px;
      margin-top: 12px;
      padding: 11px 12px 16px 12px;
      .title {
        color: #ffffff;
      }
    }
    .set-meal-box {
      @apply flex flex-wrap gap-x-3 gap-y-4 mt-4;
    }
    .set-meal-type {
      width: 153px;
      height: 159px;
      background-color: #fff;
      border-radius: 8px;
      position: relative;
    }

    .pay-btn {
      width: 96px;
      height: 28px;
      text-align: center;
      background-image: linear-gradient(90deg, #ffeba7 0%, #f7ca70 100%);
      border-radius: 28px;
      font-size: 12px;
      color: #292423;
      letter-spacing: 0;
      line-height: 28px;
      font-weight: 500;
      position: absolute;
      left: 28px;
      bottom: 12px;
    }
    .paying {
      background-image: linear-gradient(88deg, #f7f7f7 1%, #dedede 100%);
      border-radius: 8px;
      margin-top: 12px;
      padding: 12px 0 0 12px;
    }
  }
  &.style_2 {
    .title {
      color: #000000;
    }

    .set-meal-type {
      width: 120px;
      height: 159px;
      position: relative;

      .content {
        width: 120px;
        height: 107px;
        border-radius: 8px 8px 0 0;
        background-image: linear-gradient(134deg, #fff6e4 0%, #ffe6f0 100%);
      }
      .pay-btn-box {
        width: 120px;
        height: 52px;
        background-color: #fff;
        border-radius: 0 0 8px 8px;
        border: 2px solid #f1f1f1;
        border-top: none;
      }
      .pay-btn {
        width: 72px;
        height: 28px;
        text-align: center;
        background-image: linear-gradient(134deg, #ffc445 0%, #ff6d93 100%);

        border-radius: 28px;
        font-size: 12px;
        color: #fff;
        letter-spacing: 0;
        line-height: 28px;
        font-weight: 500;
        position: absolute;
        left: 24px;
        bottom: 12px;
      }
    }
    .paying {
      height: 71px;
      background-image: linear-gradient(134deg, #fff6e4 0%, #ffe6f0 100%);
      border: 2px solid #f3c9c9;
      padding: 0 16px 0 12px;
      margin-top: 12px;
      border-radius: 8px;
      @apply flex justify-between;
      .money {
        margin: 0;
        line-height: 71px;
      }
      .type {
        line-height: 71px;
        @apply flex justify-between;
      }
    }

    .gold-exchange {
      background: #f9f4f3;
      color: #ff613f;
    }
    .immediate-pay {
      background-image: linear-gradient(134deg, #ffc445 0%, #ff6d93 100%);
      color: #fff;
    }
  }
  &.style_3 {
    .title {
      color: #000000;
    }
    .set-meal-box {
      @apply gap-x-2;
    }
    .set-meal-type {
      width: 109px;
      height: 116px;
      position: relative;
    }
    .price-tag {
      width: 40px;
      height: 16px;
      font-size: 12px;
      text-align: center;
      background-color: #ff613f;
      border-radius: 0 8px 0 8px;
      position: absolute;
      top: 0;
      right: 0;
    }
    .content {
      width: 109px;
      height: 116px;
      background-color: #fff;
      border: 2px solid #f1f1f1;
      border-radius: 8px;
      padding: 0;
      position: relative;
    }
    .choice {
      background: #fffadb;
      border: 2px solid #d8a53d;
    }
    .content .type {
      margin-top: 28px;
      text-align: center;
    }
    .symbol-used {
      color: #d8a53d;
    }
    .symbol-unused {
      line-height: 0;
      margin: 0;
      position: absolute;
      left: 38px;
      bottom: 16px;
    }
    .money {
      line-height: 24px;
      margin-top: 6px;
      padding-left: 30px;
    }
    .price {
      color: #d8a53d;
    }
    .pay-btn {
      height: 40px;
      background-image: linear-gradient(90deg, #ffeba7 0%, #f7ca70 100%);
      border-radius: 40px;
      line-height: 40px;
      font-size: 14px;
      margin-top: 16px;
      color: #292423;
      text-align: center;
    }
    .paying {
      height: 71px;
      background: #fffadb;
      border: 2px solid #d8a53d;
      padding: 0 16px 0 12px;
      margin-top: 12px;
      border-radius: 8px;
      position: relative;
      @apply flex justify-between;
      .money {
        margin: 0;
        line-height: 71px;
      }
      .type {
        line-height: 71px;
        @apply flex justify-between;
      }
      .price-tag {
        position: absolute;
        top: -2px;
        right: -2px;
        border-top-right-radius: 8px;
      }
    }
  }
}
</style>
